<template>
<div>
  <en-table-layout
    toolbar
    pagination
    ref="tableLayout"
    :height="tableHeight"
    :loading="pageLoading"
    :tableData="tableData"
    :selectionChange="selectionChange">
    <div slot="toolbar" class="inner-toolbar">
      <div class="toolbar-btns">
        <el-button type="primary" @click="handleAddActive()">新增活动</el-button>
      </div>
      <div class="toolbar-search">          
        <en-table-search
          @search="searchEvent"
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="500"
          placeholder="请输入活动名称">
          <template slot="advanced-content">
            <el-form ref="searchForm" class="search-form" :model="searchForm" label-width="100px">
              <el-form-item label="活动名称:" prop="luckName">
                <el-input
                  v-model="searchForm.luckName"
                  placeholder="请输入活动名称"
                  clearable
                  @keyup.enter.native="search()"></el-input>
              </el-form-item>
              <el-form-item label="开始时间:" prop="startTime">
                <el-date-picker
                  v-model="searchForm.startTime"
                  type="datetime"
                  placeholder="开始时间"
                  default-time="00:00:00"
                  value-format="timestamp"
                  clearable
                  align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:" prop="endTime">
                <el-date-picker
                  v-model="searchForm.endTime"
                  type="datetime"
                  placeholder="结束时间"
                  default-time="23:59:59"
                  value-format="timestamp"
                  clearable
                  align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="活动状态:" prop="luckStatus">
                <el-select v-model="searchForm.luckStatus" clearable placeholder="活动状态">
                  <el-option label="全部" value=" "></el-option>
                  <el-option label="待上线" value="1"></el-option>
                  <el-option label="已上线" value="2"></el-option>
                  <el-option label="已下线" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </en-table-search>
      </div>
    </div>
    <template slot="table-columns">
      <el-table-column type="selection" width="50" fixed/>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdateActive(scope.row)">修改</el-button>
          <el-button type="text" v-if="scope.row.luck_status !== 3" @click="handleDelActive(scope.row)">删除</el-button>
          <el-button type="text" v-if="scope.row.luck_status === 2" @click="handleChangeActiveStatus(scope.row, 3)">下线</el-button>
          <el-button type="text" v-if="scope.row.luck_status !== 2" @click="handleChangeActiveStatus(scope.row, 2)">上线</el-button>
        </template>
      </el-table-column>
      <el-table-column label="活动ID" prop="luck_id" width="150"/>
      <el-table-column label="活动名称" prop="luck_name" min-width="160"></el-table-column>
      <el-table-column label="副标题" prop="luck_title" min-width="100"></el-table-column>
      <el-table-column  label="活动状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.luck_status === 1">待上线</span>
          <span v-if="scope.row.luck_status === 2">上线</span>
          <span v-if="scope.row.luck_status === 3">下线</span>
        </template>
      </el-table-column>
      <el-table-column label="抽奖门槛" prop="min_limit_price" min-width="100"></el-table-column>
      <el-table-column label="每日次数" prop="day_max_times" min-width="100"></el-table-column>
      <el-table-column label="奖品清单" width="120">
        <template slot-scope="scope">
          <span style="color: #00a2d4;cursor: pointer;" @click="prizeManage(scope.row)">管理奖品</span><br>
        </template>
      </el-table-column>
      <el-table-column label="中奖名单" width="120">
        <template slot-scope="scope">
          <span @click="showDetail(scope.row)" style="color: #00a2d4;cursor: pointer;">查看明细</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" width="140" :formatter="MixinUnixToDate" prop="start_time"></el-table-column>
      <el-table-column label="结束时间" width="140" :formatter="MixinUnixToDate" prop="end_time"></el-table-column>
      <el-table-column label="活动描述" prop="luck_desc" width="120"></el-table-column>
      <el-table-column label="创建时间" :formatter="MixinUnixToDate" prop="create_time" width="120"></el-table-column>
      <el-table-column label="创建人" prop="create_name" width="120"></el-table-column>
      <el-table-column label="修改时间" :formatter="MixinUnixToDate" prop="update_time" width="120"></el-table-column>
      <el-table-column label="修改人" prop="update_name" width="120"></el-table-column>
    </template>
    
    <el-pagination
      slot="pagination"
      v-if="pageData"
      @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange"
      :current-page="pageData.page_no"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.data_total">
    </el-pagination>
  </en-table-layout>
  <!--新增活动-->
  <el-dialog :title="activeTitle" :visible.sync="createActiveDialog" width="600px" >
    <el-form
      ref="createForm"
      label-width="85px"
      size="small"
      :model="createForm"
      :rules="createFormRules"
      >
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动名称:" prop="luck_name">
            <el-input v-model="createForm.luck_name" placeholder="请输入活动名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="副标题:" prop="luck_title">
            <el-input v-model="createForm.luck_title" placeholder="请输入副标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker
              v-model="createForm.start_time"
              type="datetime"
              placeholder="开始时间"
              default-time="00:00:00"
              value-format="timestamp"
              clearable
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker
              v-model="createForm.end_time"
              type="datetime"
              placeholder="结束时间"
              default-time="23:59:59"
              value-format="timestamp"
              clearable
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="抽奖门槛:" prop="min_limit_price">
            <el-input v-model="createForm.min_limit_price" placeholder="请输入抽奖门槛"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="每日次数:" prop="day_max_times">
            <el-input-number v-model="createForm.day_max_times" :min="1" :max="10000"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动描述:" prop="luck_desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请输入活动描述"
              v-model="createForm.luck_desc">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary"  @click="submitCreateForm('createForm')" :loading="loading_btn">确 定</el-button>
      <el-button size="small" @click="handleCancel('createForm')">取 消</el-button>
    </div>
  </el-dialog>
  <!--管理奖品-->
  <el-dialog title="管理奖品" :visible.sync="prizeManageDialog" width="1051px" class="prize-dialog">
    <el-form :model="formData" :rules="prizeFormRules" ref="prizeForm">
      <el-table :data="formData.prizeData" border highlight-current-row style="width: 100%;overflow-x: hidden;">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="prize_img" 
          width="120">
          <template slot="header" slot-scope="scope">
            <p>
              <span style="color:red;font-size:16px;">*</span>
              奖品图片
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: true, message: '请输入奖品图片', trigger: 'blur' }]">
              <div @click="curImgIndex = scope.$index">
                <el-upload
                  class="img-upload goods-images"
                  :action="MixinUploadApi"
                  :on-remove="handleRemove"
                  :on-error="handleError"
                  :on-success="handleSuccess"
                  :show-file-list='false'>
                  <el-button size="small" type="text" style="color:#000;">
                    <img v-show="scope.row.prize_img" width="100%" :src="scope.row.prize_img" alt="">
                    <span v-show="!scope.row.prize_img">+上传图片</span>
                  </el-button>
                </el-upload>
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="prize_name" 
          width="120">
          <template slot="header" slot-scope="scope">
            <p>
              <span style="color:red;font-size:16px;">*</span>
              奖品名称
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: true, message: '请输入奖品名称', trigger: 'blur' }]">
              <el-input v-model="scope.row.prize_name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="probability" 
          width="120">
          <template slot="header" slot-scope="scope">
            <p>
              <span style="color:red;font-size:16px;">*</span>
              中奖概率
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: true, message: '请输入概率', trigger: 'blur' }]">
              <el-input v-model="scope.row.probability" placeholder="请输入概率"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="prize_num" 
          width="150">
          <template slot="header" slot-scope="scope">
            <p>
              <span style="color:red;font-size:16px;">*</span>
              奖品份数
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: true, message: '请输入奖品份数', trigger: 'blur' }]">
              <el-input-number v-model="scope.row.prize_num" placeholder="请输入份数" :min="1" :max="10000"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="prize_type" 
          width="150">
          <template slot="header" slot-scope="scope">
            <p>
              <span style="color:red;font-size:16px;">*</span>
              奖品类型
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: true, message: '请输入奖品类型', trigger: 'blur' }]">
              <el-select v-model="prizeForm[scope.$index].prize_type" clearable placeholder="请选择">
                <el-option label="实物奖品" :value="1"></el-option>
                <el-option label="营销卷" :value="2"></el-option>
                <el-option label="虚拟奖品" :value="3"></el-option>
                <el-option label="谢谢参与" :value="4"></el-option>
              </el-select>
            </el-form-item>

          </template>
        </el-table-column>
        <el-table-column
          prop="delivery_type" 
          label="奖品设置"
          width="150">
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: false, message: '请选择出库时效', trigger: 'blur' }]">
              <el-select v-model="scope.row.delivery_type" clearable placeholder="请选择" v-show="prizeForm[scope.$index].prize_type === 1">
                <el-option label="即时出库" :value="1"></el-option>
                <el-option label="延迟出库" :value="2"></el-option>
              </el-select>
              <el-select v-model="scope.row.coupon_id" clearable placeholder="请选择" v-show="prizeForm[scope.$index].prize_type === 2" @change="scope.row.delivery_type = 1">
                <!-- <el-option label="营销卷" :value="1"></el-option>
                <el-option label="营销卷2" :value="2"></el-option> -->
                <el-option
                  v-for="item in couponList"
                  :key="item.coupon_id"
                  :label="item.title"
                  :value="item.coupon_id">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark" 
          width="150">
          <template slot-scope="scope">
            <el-form-item :rules="[{ required: false, message: '请输入备注', trigger: 'blur' }]">
              <el-input type="textarea" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" v-if="!updateBtnShow" @click="submitPrizeForm('prizeForm')" :loading="loading_btn">保存设置</el-button>
      <el-button size="small" type="primary" v-if="updateBtnShow" @click="updatePrizeForm('prizeForm')" :loading="loading_btn">修改奖品</el-button>
      <el-button size="small" @click="handlePrizeCancel('prizeForm')">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getDictData, filterShowDict } from '@/common/filter-show';
import { UploadSortable } from '@/components'
import AddPrize from './addPrize'
import * as API_prom from '@/api/promotion'
let multipleSelection = []
export default {
  name: 'dispatch',
  components: {
    [UploadSortable.name]: UploadSortable,
    AddPrize
  },
  data () {
    return {
      pageLoading: false, // 页面加载动画
      loading_btn: false, // 按钮加载动画
      updateBtnShow: false, // 按钮加载动画
      createActiveDialog: false, // 新增、修改活动
      activeTitle: '', // 新增、修改活动标题
      createDialogType: undefined,
      prizeManageDialog: false, // 管理奖品
      upload_list: [],
      resultArr: [], //用来接受返回结果的数组
      curImgIndex: 0,
      // 表格数据
      tableHeight: 700,
      searchForm: { // 搜索
        'luckName': undefined,
        'startTime': undefined,
        'endTime': undefined,
        'luckStatus': undefined
      },
      formData: {}, // 订单列表
      tableData: [], // 订单列表
      prizeData: [], // 订单列表
      couponList: [], // 订单列表
      pageData: {
        // 分页属性
        total: 0, // 记录总条数
        pageSize: 10, // 每页显示条数
        pageIndex: 1 // 当前页
      },
      createForm: {
        luck_name: undefined,
        luck_title: undefined,
        start_time: undefined,
        end_time: undefined,
        min_limit_price: undefined,
        day_max_times: undefined,
        luck_desc: undefined
      },
      createFormRules: {
        luck_name: { required: true, message: '请输入活动名称', trigger: 'blur' },
        start_time: { required: true, message: '请输入开始时间', trigger: 'blur' },
        end_time: { required: true, message: '请输入结束时间', trigger: 'blur' },
        min_limit_price: { required: true, message: '请输入抽奖门槛', trigger: 'blur' },
        day_max_times: { required: true, message: '请输入每日次数', trigger: 'blur' },
        luck_desc: { required: true, message: '请输入活动描述', trigger: 'blur' }
      },
      prizeForm: [],
      prizeFormRules: {
        prize_name: [{ required: true, message: '请输入奖品名称', trigger: 'blur' }],
        probability: [{ required: true, message: '请输入中奖概率', trigger: 'blur' }],
        prize_num: [{ required: true, message: '请输入奖品份数', trigger: 'blur' }],
        prize_type: [{ required: true, message: '请输入奖品类型', trigger: 'blur' }],
        prize_img: [{ required: true, message: '请上传奖品图片', trigger: 'blur' }],
        delivery_type: [{ required: false, message: '请输入出库时效', trigger: 'blur' }],
        remark: [{ required: false, message: '请上传奖品图片', trigger: 'blur' }]
      },

      curLuckyId: undefined,
      dialogLoading: false,
      dialogCopy: false, 

      params: {
        'page_no': 1,
        'page_size': 10
      }
    };
  },
  filters: {
    // 字典状态显示转换
    filterDict (_stateVal, _dictType) {
      return filterShowDict(_dictType, _stateVal);
    }
  },
  mounted () {
    // 字典查询
    getDictData('dispatch_status');
    this.getDataList();
    this.getCouponListByType();
  },
  methods: {
    getDataList () {
      this.pageLoading = true;
      let _params = {
        ...this.params
      };
      API_prom.queryLuckList(_params).then(res => {
        let _data = res.data;
        if (_data) {
          this.tableData = _data;
          this.pageData = {
            page_no: res.page_no,
            page_size: res.page_size,
            data_total: res.data_total
          }
          this.pageLoading = false;
        } else {
          this.$messageError(_data.message);
          this.pageLoading = false;
        }
      }).catch((err) => {
        this.$messageError(err.message);
        this.pageLoading = false;
      })
    },
    /** 获取选中项*/
    selectionChange(val) {
      const _count = val.length;
      const _tableLength = this.tableData.length;
      this.selectedDatas = val;
      this.tableIsIndeterminate = _count > 0 && _count < _tableLength;
      this.tableCheckAll = _count === _tableLength;
      if (_count === 0) {
        this.tableCheckAll = false;
      } else if (_count === _tableLength) {
        this.tableCheckAll = true;
      }
      multipleSelection = val;
    },
    // 远程搜索
    remoteMethod (query) {
      this.getDataList(query);
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    /* 添加活动、修改活动 */
    handleAddActive () {
      this.createDialogType = 1;
      this.createActiveDialog = true;
      this.activeTitle = '新增活动';
      this.createForm = {
        luck_name: '',
        luck_title: '',
        start_time: null,
        end_time: null,
        min_limit_price: null,
        day_max_times: '',
        luck_desc: ''
      }
    },
    /* 添加活动、修改活动 */
    handleUpdateActive (row) {
      this.createDialogType = 2;
      this.createActiveDialog = true;
      this.activeTitle = '修改活动';
      this.createForm = row;
      let newObj = Object.assign({}, row);
      this.curLuckyId = newObj.luck_id;
      this.createForm = {
        luck_name: newObj.luck_name,
        luck_title: newObj.luck_title,
        start_time: newObj.start_time * 1000,
        end_time: newObj.end_time * 1000,
        min_limit_price: newObj.min_limit_price,
        day_max_times: newObj.day_max_times,
        luck_desc: newObj.luck_desc
      }
    },
    /* 活动删除 */
    handleDelActive (row) {
      this.$confirm(
        '确定要删除此活动吗？'
      ).then(_ => {
        API_prom.deleteLuck(row.luck_id).then(res => {
          this.$message.success(res.message)
          this.getDataList()
        }).catch((err) => {
          this.$message.error(err.message)
        })
      }).catch(_ => {
        this.$message({
          type: 'warning',
          message: '操作已取消'
        })
      })
    },
    /* 活动上线/下线 */
    handleChangeActiveStatus (row, status) {
      let _params = {
        luck_id: row.luck_id,
        luck_status: status
      };
      API_prom.onOffLine(_params).then(res => {
        this.$message.success(res.message)
        this.getDataList()
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    searchEvent () {
      let _searchForm = JSON.parse(JSON.stringify(this.searchForm));
      for (const _key in _searchForm) {
        if (_searchForm[_key] === '') { // 当条件值为''时去除条件
          delete _searchForm[_key];
        }
      }
      this.params = {
        ...this.params,
        luckName: this.searchForm.luckName
      };
      this.getDataList();
    },
    advancedSearchEvent () {
      let _searchForm = JSON.parse(JSON.stringify(this.searchForm));
      for (const _key in _searchForm) {
        if (_searchForm[_key] === '') { // 当条件值为''时去除条件
          delete _searchForm[_key];
        }
      }
      this.params = {
        ...this.params,
        ..._searchForm
      };
      this.getDataList();
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      this.getDataList();
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      this.getDataList();
    },
    /* 管理奖品 */
    prizeManage (row) {
      this.curLuckyId = row.luck_id;
      let _params = {
        luck_id: row.luck_id
      };
      API_prom.queryLuckPrizeList(_params).then(res => {
        this.prizeForm = []
        this.prizeManageDialog = true;
        if (res.length>0) {
          this.prizeForm = []
          this.updateBtnShow = true
          res.forEach(item => this.prizeForm.push(item))
        } else {
          this.updateBtnShow = false
          let prizeData = {
            prize_name: undefined,
            probability: undefined,
            prize_num: undefined,
            prize_type: undefined,
            day_max_times: undefined,
            prize_img: undefined,
            remark: undefined
          }
          let fileData = {
            img_id: undefined,
            original: undefined,
            url: undefined,
            sort: undefined,
            name: undefined
          }
          for (let i=0; i<8; i++) {
            this.prizeForm.push(prizeData)
            this.upload_list.push(fileData)
          }
        }
        this.formData.prizeData = this.prizeForm
        this.prizeForm.forEach((item, index) => {
          this.$set(this.formData.prizeData, index, JSON.parse(JSON.stringify(item)))
        })
        this.upload_list.forEach((item, index) => {
          this.$set(this.upload_list, index, JSON.parse(JSON.stringify(item)))
        })
        console.log('formData:', this.formData)
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    /** 奖品图片 改变时触发*/
    submitPrizeForm (prizeForm) {
      if (this.formData.prizeData.some(key => { return !key.prize_img && parseInt(key.prize_img) !== 0 })) {
        this.$message.error('请选择奖品图片')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_name && parseInt(key.prize_name) !== 0 })) {
        this.$message.error('请填写奖品名称')
        return
      } else if (this.formData.prizeData.some(key => { return !key.probability && parseInt(key.probability) !== 0 })) {
        this.$message.error('请填写中奖概率')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_num && parseInt(key.prize_num) !== 0 })) {
        this.$message.error('请填写奖品份数')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_type && parseInt(key.prize_type) !== 0 })) {
        this.$message.error('请填写奖品类型')
        return
      }
      this.loading_btn = true
      this.prizeForm.forEach((item) => {
        item.luck_id = this.curLuckyId
      })
      API_prom.addLuckPrize(this.prizeForm).then(res => {
        let _data = res;
        if (_data) {
          this.$message.success(_data.message);
          this.prizeManageDialog = false;
        } else {
          this.$message.error(_data.message);
        }
        this.loading_btn = false
      }).catch((err) => {
        this.$message.error(err.message);
        this.loading_btn = false
      })
    },
    updatePrizeForm (prizeForm) {
      if (this.formData.prizeData.some(key => { return !key.prize_img && parseInt(key.prize_img) !== 0 })) {
        this.$message.error('请选择奖品图片')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_name && parseInt(key.prize_name) !== 0 })) {
        this.$message.error('请填写奖品名称')
        return
      } else if (this.formData.prizeData.some(key => { return !key.probability && parseInt(key.probability) !== 0 })) {
        this.$message.error('请填写中奖概率')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_num && parseInt(key.prize_num) !== 0 })) {
        this.$message.error('请填写奖品份数')
        return
      } else if (this.formData.prizeData.some(key => { return !key.prize_type && parseInt(key.prize_type) !== 0 })) {
        this.$message.error('请填写奖品类型')
        return
      }
      this.loading_btn = true
      API_prom.addLuckPrize(this.prizeForm).then(res => {
        let _data = res;
        if (_data) {
          this.$message.success(_data.message);
          this.prizeManageDialog = false;
        } else {
          this.$message.error(_data.message);
        }
        this.loading_btn = false
      }).catch((err) => {
        this.$message.error(err.message);
        this.loading_btn = false
      })
    },
    getCouponListByType (prizeForm) {
      API_prom.getCouponListByType().then(res => {
        let _data = res;
        if (_data) {
          this.couponList = res;
        } else {
          this.$message.error(_data.message);
        }
      }).catch((err) => {
        this.$message.error(err.message);
      })
    },

    handlePrizeCancel (prizeForm) {
      this.prizeManageDialog = false;
      let prizeData = {
        prize_name: undefined,
        probability: undefined,
        prize_num: undefined,
        prize_type: undefined,
        day_max_times: undefined,
        prize_img: undefined,
        remark: undefined
      }
      for (let i=0; i<8; i++) {
        this.prizeForm.push(prizeData)
      }
      this.prizeForm.forEach((item, index) => {
        this.$set(this.formData.prizeData, index, JSON.parse(JSON.stringify(item)))
      })
    },
    submitCreateForm (createForm) {
      this.$refs[createForm].validate((valide) => {    
        if (valide) {
          if (this.createDialogType === 2 ) {
            this.createForm.luck_id = this.curLuckyId
          } else {
            delete this.createForm.luck_id
          }
          this.loading_btn = true
          let startTime = this.createForm.start_time.toString()
          let endTime = this.createForm.start_time.toString()
          if (startTime.length > 10) {
            this.createForm.start_time = this.createForm.start_time / 1000
          }
          if (endTime.length > 10) {
            this.createForm.end_time = this.createForm.end_time / 1000
          }
          API_prom.addOrUpdateLuck(this.createForm).then(res => {
            let _data = res;
            this.createActiveDialog = false;
            this.getDataList()
            this.$message.success(_data.message);
            this.$refs[createForm].resetFields();
            this.loading_btn = false;
          }).catch((err) => {
            this.$message.error(err.message);
            this.loading_btn = false; 
          })
        }
      })
    },
    handleCancel (createForm) {
      this.$refs[createForm].resetFields();
      this.createActiveDialog = false;
    },
    showDetail(row) {
      this.$router.push({ path: '/leader/winner-list/'+ row.luck_id, params: { 'luck_id': row.luck_id }})
    },

    /** 图片上传之前的校验  */
    beforeAvatarUpload(file) {
      const isType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'audio/mp4' || file.type === 'video/mp4'
      const isLt1M = file.size / 1024 / 1024 < 20

      if (!isType) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG/MP4 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传商品相册图片大小不能超过 20MB!')
      }

      /** 重复校验*/
      const isExit = this.upload_list.some(key => {
        return file.name === key.name
      })
      if (isExit) {
        this.$message.error('图片已存在')
      }

      return isType && isLt1M && !isExit
    },

    /** 文件列表上传成功时的钩子  上传成功校验 */
    handleSuccess(response, file, fileList) {
      if (file.response) {
        console.log(file)
        this.$set(this.formData.prizeData[this.curImgIndex], 'prize_img', JSON.parse(JSON.stringify(file.response.url)))
      }
    },

    handleError() {
      this.$message.error('上传失败!')
    },

    handleRemove(file, fileList) {
      this.upload_list.forEach((key, index) => {
        if (key.img_id !== -1) {
          if (key.img_id === file.img_id) {
            this.upload_list.splice(index, 1)
          }
        } else {
          if (key.name === file.response.name) {
            this.upload_list.splice(index, 1)
          }
        }
      })
      if (fileList.length <= 0) {
        this.upload_list = []
      }
    }  
  }
};
</script>

<style lang="scss" scoped>
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }
  /deep/ .el-input--suffix .el-input__inner {
    padding-right: 0;
  }
  /deep/ .search-btn-part.el-form-item--small .el-form-item__content {
    margin-left: 20px!important;
    display: flex;
  }
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 180px;
  }

  /deep/ .el-table {
    width: 100%;
    overflow-x: scroll;
    & td:not(.is-left) {
      text-align: center;
    }
  }

  .search-btn-part {
    .el-form-item__content {
      display: flex;
      margin-left: 20px!important;
    }
  }
  .inner-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 1200px;
    justify-content: space-between;
    align-items: center;
  }

  .toolbar-search {
    width: 20%;
  }

  .search-form {
    // display: flex;
    // flex-flow: row wrap;
    // justify-content: flex-start;
    // align-items: center;
    .el-button {
      margin-right: 10px;
      & + .el-button {
        margin-left: 0;
      }
    }
    .conditions {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      min-width: 24.5%;
      .choose-machine {
        width: 60%;
      }
    }
    .fun-btn-box {
      padding: 0 20px;
      width: 100%;
      height: 70px;
      border-top: 1px solid #999;
    }
  }
  .addPrize {
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    background: #f2f2f2;
    color: #EC1212;
  }
  /*图片上传组件第一张图设置封面*/
  .goods-images {
    /deep/ li.el-upload-list__item:first-child {
      position: relative;
    }
    /deep/ li.el-upload-list__item:first-child:after {
      content:"封";
      color:#fff;
      font-weight:bold;
      font-size: 12px;
      position: absolute;
      left: -15px;
      top: -6px;
      width: 40px;
      height: 24px;
      padding-top: 6px;
      background: #13ce66;
      text-align: center;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
      box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
    }
  }
  .mb20 {
    margin-bottom: 60px;
    border-bottom: 1px dashed #dcdfe6;
  }
  /deep/ .img-upload .img_none .el-icon-upload2 {
    font-size: 42px;
  }
  /deep/ .img-upload .img_none .upload-tip {
    line-height: 20px;
  }
  /deep/ .img-upload .img_none {
    position: relative;
    padding: 15px;
    margin: 0 10px 0 0;
    width: 100px;
    height: 100px;
    line-height: 0;
    border: dashed 1px #E6E6E6;
    border-radius: 2px;
    text-align: center;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #F8FAFF;
    color: #999;
  }
  .fun-btn-box {
    background: #fff;
    padding: 10px;
    border-bottom: 1px solid #e6ebf5;
  }
  /deep/ .container .el-form-item {
    margin-bottom: 0!important;
  }
  /deep/ .prize-form .el-input-number--small, .prize-form .el-select.el-select--small, .el-date-editor.el-input, .el-date-editor.el-input__inner, .el-input__inner {
    width: 100%;
  }
  /deep/ .prize-form .goods-images .row-tip {
    display: none;
  }
  .prize-img {
    height: auto;
    width: 200px;
  }
  /deep/ .prize-dialog .el-form-item__content{
    margin-left: 0!important;
  }
  /deep/ .prize-dialog .el-form-item--small.el-form-item{
    margin-bottom: 0!important;
  }
</style>